<template>
    <div :class="['heading','heading-'+this.grade]">
    <span v-if="this.grade=='2'" class="heading-2-inner">
      <slot></slot>
    </span>
        <slot v-else></slot>
    </div>
</template>

<script>
  export default {
    props: {
      grade: {
        type: String,
        default: 2
      }
    }
  }
</script>

<style lang="scss">
    @import '~styles/var.scss';
    .heading{
        small{
            color:$sub-color;
            margin:0px 5px;
            font-weight: normal;
        }
    }
    .heading-1 {
        border-left: 3px solid $primary-color;
        padding-left: 10px;
        font-size: 18px;
        margin: 25px 0;
        font-weight: bold;
    }

    .heading-2 {
        border-bottom: 1px solid $border-color-base;
        margin: 25px 0;
        line-height: 36px;
        &-inner {
            display: inline-block;
            vertical-align: middle;
            border-bottom: 2px solid $primary-color;
            margin-bottom: -1px;
            padding: 0 10px;
            font-size: 16px;
            position:relative;
            small{
              position: absolute;
              left: 100%;
              top: 0;
              white-space:nowrap
            }
        }
    }
</style>
